<template>
    <div class="sys-container">
        <el-dialog v-model="state.isSynShowDialog" draggable width="769px" @close="closeDialog">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="13" :lg="12" :xl="12" class="mb20">
                        <el-form-item :label="state.text" prop="controlLevel">
                            <label style="font-size: 14px;">涉及到：产品计划->次日计划->当日计划？</label>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="11" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="当日同步" prop="controlLevel">
                            <el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4">
                                <el-radio :label="1">同步</el-radio>
                                <el-radio :label="2">不同步</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editSynchronizationStatus">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { ElMessageBox, ElMessage, ElCheckbox } from 'element-plus';
import { DiProductPlan } from '/@/api/models';
import SysDiCustomerProductApi from '/@/api/delivery/customerProduct';
import { ElLoading } from 'element-plus'

const props = defineProps({
    title: String,
});

const ruleFormRef = ref();
const state = reactive({
    isSynShowDialog: false,
    ruleForm: {} as DiProductPlan,
    text: '',
});

// 打开弹窗
const openDialog = async (row: DiProductPlan) => {
    var onStatus: string = '';
    if (row.status == 1) onStatus = '一键启动';
    if (row.status == 2) onStatus = '一键关闭';
    state.text = `${onStatus}:`
    state.ruleForm = row;
    state.ruleForm.syncPlanDaily = 1;
    state.isSynShowDialog = true;
    // console.log(1, row);

};

// 关闭弹窗
const closeDialog = () => {
    mittBus.emit('submitRefresh');
    state.isSynShowDialog = false;
};

// 取消
const cancel = () => {
    state.isSynShowDialog = false;
};

// 提交
const submit = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    ruleFormRef.value.validate(async (valid: boolean) => {
        if (!valid) return;
        await SysDiCustomerProductApi()
            .setStatusPost({ id: state.ruleForm.id, syncPlanDaily: state.ruleForm.syncPlanDaily, status: state.ruleForm.status, productId: state.ruleForm.productId })
            .then((res) => {

                if (res.data.resCode) {
                    loading.close()
                    ElMessage.success(`状态设置成功`);
                } else {
                    loading.close()
                }
            })
            .catch(() => {
                state.ruleForm.status = state.ruleForm.status == 1 ? 2 : 1;
            });
        state.isSynShowDialog = false;
        // mittBus.emit('submitRefresh');
    });
};

// 导出对象
defineExpose({ openDialog });
</script>
